/**
 * 头像裁剪上传
 */
jQuery(function($) {

	// 提交按钮绑定事件
	$('#js_submit').click(function(e) {
		$(this).button('loading');
		$("#js_x").val(jcrop_api.tellSelect().x);
		$("#js_y").val(jcrop_api.tellSelect().y);
		$("#js_w").val(jcrop_api.tellSelect().w);
		$("#js_h").val(jcrop_api.tellSelect().h);
		$.post($("#avatarForm").attr('action'), $("#avatarForm")
				.serialize(), function(data, status) {
			if (data.status == 'ok') {
				success("修改成功");
				setTimeout(function(){
					window.location.href="/";
				}, 2000);
			} else {
				error("修改失败");
			}
		});
		$(this).button('reset');
	});

	// 初始化上传组件
	$('#fileupload').fileupload({
		dataType : 'json',
		done : function(e, data) {
			if (data.result.status == 'ok') {
				initJCrop(data.result.url);
				$("#js_url").val(data.result.url);
				// 上传成功后返回的图片url
				// initJCrop('/static/vendor/jcrop/demo_files/sago.jpg');
			}
		}
	});
	var jcrop_api, boundx, boundy;
	// 初始化裁剪组件
	function initJCrop(url) {
		// 载入上传的图片
		$('#target,.jcrop-preview').attr('src', url);

		var $preview = $('#preview-pane'),
		$pcntLg = $('#preview-pane .preview-container-lg'), //大尺寸
		$pcntMd = $('#preview-pane .preview-container-md'), //中尺寸
		$pcntSm = $('#preview-pane .preview-container-sm'), //小尺寸
		$pimgLg = $('#preview-pane .preview-container-lg img'),
		$pimgMd = $('#preview-pane .preview-container-md img'),
		$pimgSm = $('#preview-pane .preview-container-sm img'),
		xsizeLg = $pcntLg.width(), 
		ysizeLg = $pcntLg.height(), 
		xsizeMd = $pcntMd.width(), 
		ysizeMd = $pcntMd.height(), 
		xsizeSm = $pcntSm.width(), 
		ysizeSm = $pcntSm.height();

		//如果已经存在jcrop实例，先删除再初始化
		if (jcrop_api && jcrop_api.destroy) {
			jcrop_api.destroy();
		}
		$('#target').Jcrop({
			aspectRatio : 1,
			onChange : updatePreview,
			onSelect : updatePreview,
			setSelect : [ 0, 0, 160, 160 ]
		}, function() {
			// Use the API to get the real image size
			var bounds = this.getBounds();
			boundx = bounds[0];
			boundy = bounds[1];
			// Store the API in the jcrop_api variable
			jcrop_api = this;
			$("#js_originalW").val(boundx);
			$("#js_originalH").val(boundy);
			// Move the preview into the jcrop container for css positioning
			// $preview.appendTo(jcrop_api.ui.holder);
		});

		function updatePreview(c) {
			var rx, ry;
			if (parseInt(c.w) > 0) {
				rx = xsizeLg / c.w;
				ry = ysizeLg / c.h;
				$pimgLg.css({
					width : Math.round(rx * boundx) + 'px',
					height : Math.round(ry * boundy) + 'px',
					marginLeft : '-' + Math.round(rx * c.x) + 'px',
					marginTop : '-' + Math.round(ry * c.y) + 'px'
				});

				rx = xsizeMd / c.w;
				ry = ysizeMd / c.h;
				$pimgMd.css({
					width : Math.round(rx * boundx) + 'px',
					height : Math.round(ry * boundy) + 'px',
					marginLeft : '-' + Math.round(rx * c.x) + 'px',
					marginTop : '-' + Math.round(ry * c.y) + 'px'
				});

				rx = xsizeSm / c.w;
				ry = ysizeSm / c.h;
				$pimgSm.css({
					width : Math.round(rx * boundx) + 'px',
					height : Math.round(ry * boundy) + 'px',
					marginLeft : '-' + Math.round(rx * c.x) + 'px',
					marginTop : '-' + Math.round(ry * c.y) + 'px'
				});
			}
		}
		;
	}
});